<!DOCTYPE>
<html>
<body>
<script src="../resources/common.js"></script>
<script src="../../../resources/js-test.js"></script>
<input type="textfield" id="text" onchange="handleChangeEvent(this);" value="value">
<input type="reset" id="reset">
<script>
description('In a text field after reset when whole text is deleted i.e. text value is empty. When out of focus, it should dispatch change event');

var changeEventCounter = 0;

function handleChangeEvent(element) {
    ++changeEventCounter;
}

var reset = document.getElementById('reset');
var text = document.getElementById('text');

debug('Press reset button');
clickElement(reset);

text.focus();
shouldBeEqualToString('text.value', 'value');
shouldBe('changeEventCounter', '0');

debug('Delete the whole text');
document.execCommand('SelectAll', false, null);
document.execCommand('Delete', false, null);

debug('Out of focus from text field');
reset.focus();
shouldBeEqualToString('text.value', '');
shouldBe('changeEventCounter', '1');

</script>
</body>
</html>
